<template>
    <!-- 详情 -->
    <el-dialog class="ba-operate-dialog" v-model="baTable.table.extend!.showDetailDialog" :fullscreen="true">
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                {{ $t('shop.order.order.order_detail') }}
            </div>
        </template>
        <div v-if="orderData" class="info-box">
            <el-card class="card">
                <el-steps
                    :active="orderData.status"
                    finish-status="error"
                    align-center
                    v-if="orderData.status == orderStatusEnum.cancel || orderData.status == orderStatusEnum.applyCancel"
                >
                    <el-step
                        v-for="(item, index) in orderStatusSteps"
                        :key="index"
                        :title="item.title"
                        :description="item.time"
                        :status="item.status"
                    ></el-step>
                </el-steps>
                <el-steps :active="orderData.status" finish-status="success" align-center v-else>
                    <el-step :title="$t('shop.order.order.order_create')" :description="orderData.create_time || ''"> </el-step>
                    <el-step :title="$t('shop.order.order.order_pay')" :description="orderData.pay_time || ''"> </el-step>
                    <el-step :title="$t('shop.order.order.order_delivery')" :description="orderData.delivery_time || ''"> </el-step>
                    <el-step :title="$t('shop.order.order.order_receive')" :description="orderData.receive_time || ''"> </el-step>
                    <el-step :title="$t('shop.order.order.order_complete')" :description="orderData.evaluate_time || ''"> </el-step>
                </el-steps>
            </el-card>
            <!-- 基本信息 -->
            <el-card>
                <template #header>
                    <el-text size="large">{{ $t('Operate') }}</el-text>
                    <div class="action">
                        <el-button v-if="showDeliveryButton(orderData)" @click="baTable.table.extend!.showDeliveryDialog = true" type="primary">
                            {{ $t('shop.order.order.delivery') }}
                        </el-button>
                        <el-button v-if="showCancelButton(orderData)" @click="baTable.table.extend!.showCancelDialog = true" type="danger">
                            {{ $t('shop.order.order.order_cancel_verify') }}
                        </el-button>
                        <el-button v-if="showCloseButton(orderData)" @click="baTable.table.extend!.showCloseDialog = true" type="danger">
                            {{ $t('shop.order.order.close') }}
                        </el-button>
                    </div>
                </template>
                <el-scrollbar>
                    <el-descriptions :title="$t('shop.order.order.orderInfo')" border class="info-box-head" min-width="130">
                        <el-descriptions-item :label="$t('shop.order.order.order_no')" `>
                            {{ orderData.order_no }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.status')" min-width="130">
                            <el-tag :type="getStatusType(orderData.status)">
                                <view v-if="orderData.delivery_status == orderStatusEnum.toReceive">{{ '部分发货' }}</view>
                                <view v-else> {{ $t('shop.order.order.status ' + orderData.status) }} </view>
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item
                            v-if="orderData.status == orderStatusEnum.cancel"
                            :label="$t('shop.order.order.cancel_reason')"
                            min-width="130"
                        >
                            {{ orderData.cancel_reason }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.pay_status')" min-width="130" v-else>
                            <el-tag v-if="orderData.pay_status">
                                {{ $t('shop.order.order.pay_status ' + orderData.pay_status) }}
                            </el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.total_num')" min-width="130">
                            {{ orderData.total_num }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.remark')" :span="3" min-width="130">
                            {{ orderData.remark }}
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions :title="$t('shop.order.order.detailInfo')" class="info-box-head"> </el-descriptions>
                    <el-table :data="orderData.detail" class="info-box-table" border>
                        <el-table-column
                            :label="$t('shop.order.order.goods_name')"
                            prop="goods_name"
                            align="center"
                            min-width="200"
                        ></el-table-column>
                        <el-table-column :label="$t('shop.order.order.goods_spec')" prop="spec" align="center" min-width="130"></el-table-column>
                        <el-table-column :label="$t('shop.order.order.goods_logo')" align="center" min-width="130">
                            <template #default="{ row }">
                                <el-image
                                    :src="fullUrl(row.image)"
                                    :preview-src-list="arrayFullUrl([row.image])"
                                    :preview-teleported="true"
                                    class="info-box-table-img"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('shop.order.order.goods_price')" prop="price" align="center" min-width="130"></el-table-column>
                        <el-table-column :label="$t('shop.order.order.goods_num')" prop="num" align="center" min-width="130"></el-table-column>
                        <el-table-column
                            :label="$t('shop.order.order.coupon_amount')"
                            prop="discount_data.coupon_discount"
                            align="center"
                            min-width="130"
                        >
                        </el-table-column>
                    </el-table>

                    <el-descriptions :title="$t('shop.order.order.payInfo')" class="info-box-head" border>
                        <el-descriptions-item :label="$t('shop.order.order.order_price')" min-width="130">
                            {{ orderData.total_price }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.pay_postage')" min-width="130">
                            {{ orderData.freight }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.need_pay_price')" min-width="130">
                            <el-text>{{ orderData.pay_price }}</el-text>
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.pay_price')" min-width="130">
                            <el-text type="danger">{{ orderData.pay_status > 1 ? orderData.pay_price : '0.00' }}</el-text>
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.coupon_amount')" min-width="130">
                            - {{ orderData.discount_data.coupon_discount }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.refund_amount')" min-width="130">
                            - {{ orderData.refund_amount }}
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-descriptions :title="$t('shop.order.order.user address')" border class="info-box-head">
                        <el-descriptions-item :label="$t('shop.order.order.user username')" min-width="130">
                            {{ userContactData.name }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.user phone')" min-width="130">
                            {{ userContactData.phone }}
                        </el-descriptions-item>
                        <el-descriptions-item :label="$t('shop.order.order.user address')" :span="3" min-width="130">
                            {{ userContactData.full_address }}
                        </el-descriptions-item>
                    </el-descriptions>

                    <div v-if="deliveryData.length > 0">
                        <el-descriptions :title="$t('shop.order.order.deliveryInfo')" border class="info-box-head">
                            <div v-for="(item, index) in deliveryData" :key="index">
                                <div v-if="item.company">
                                    <el-descriptions-item :label="$t('shop.order.order.delivery_company')" min-width="130">
                                        {{ item.company.name }}
                                    </el-descriptions-item>
                                    <el-descriptions-item
                                        :label="$t('shop.order.order.delivery_no')"
                                        v-if="item.delivery_no"
                                        min-width="130"
                                        :span="2"
                                    >
                                        {{ item.delivery_no }}
                                        <el-tag class="info-box-tag-info" @click="showExpressTrack(item)">查看</el-tag>
                                    </el-descriptions-item>
                                </div>
                                <div v-else>
                                    <el-descriptions-item :label="$t('shop.order.order.delivery_company')" :span="3" min-width="130">
                                        {{ $t('shop.order.order.noNeedDelivery') }}
                                    </el-descriptions-item>
                                </div>
                            </div>
                        </el-descriptions>
                    </div>

                    <div class="card"></div>
                </el-scrollbar>
            </el-card>
        </div>
    </el-dialog>

    <ExpressDialog />
</template>

<script setup lang="ts">
import { computed, inject } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { arrayFullUrl, fullUrl } from '/@/utils/common'
import { showDeliveryButton, showCancelButton, getStatusType, showCloseButton } from '/@/views/backend/shop/order/order/index'
import ExpressDialog from './expressDialog.vue'
import { getExpressTrack } from '/@/api/backend/shop/order/order'
import { orderStatusEnum } from '/@/views/backend/shop/order/order/index'

const baTable = inject('baTable') as baTableClass

const orderData = baTable.table.extend!.orderData

const userContactData = computed(() => {
    return orderData.address
})
const deliveryData = computed(() => {
    return orderData.delivery
})
const userData = computed(() => {
    return orderData.user
})

const showExpressTrack = (item: any) => {
    const params = {
        delivery_company_id: item.delivery_company_id,
        delivery_no: item.delivery_no,
        phone: userContactData.value.phone,
        openid: userData.value.openid,
    }
    getExpressTrack(params).then((res) => {
        baTable.table.extend!.showExpressDialog = true
        baTable.table.extend!.expressData = res.data
        baTable.table.extend!.expressData[0].color = '#0bbd87'
    })
}

type statusStep = {
    title: string
    time: string
    status: '' | 'success' | 'error' | 'wait' | 'finish' | 'process'
}
const orderStatusSteps = computed(() => {
    const statusStep: statusStep[] = []
    const stepsMap = {
        create_time: {
            title: '订单创建',
            status: 'success',
        },
        pay_time: {
            title: '订单支付',
            status: 'success',
        },
        delivery_time: {
            title: '订单发货',
            status: 'success',
        },
        receive_time: {
            title: '订单收货',
            status: 'success',
        },
        evaluate_time: {
            title: '订单完成',
            status: 'success',
        },
        cancel_time: {
            title: '订单取消',
            status: 'error',
        },
    }

    for (const key in stepsMap) {
        if (orderData[key as keyof typeof orderData]) {
            statusStep.push({
                title: stepsMap[key as keyof typeof stepsMap].title,
                time: orderData[key as keyof typeof orderData],
                status: stepsMap[key as keyof typeof stepsMap].status as any,
            })
        }
    }

    return statusStep
})
</script>

<style scoped lang="scss">
.title {
    font-size: 24px;
}

.card {
    margin-bottom: 40px;
}

.info-box {
    padding-bottom: 20px;

    &-head {
        margin-top: 20px;
    }
    &-tag-info {
        cursor: pointer;
        margin-left: 10px;
    }
    &-table {
        &-img {
            height: 50px;
        }
    }
}
.action {
    display: flex;
    margin-top: 20px;
}

.el-step__title {
    font-size: 16px;
    color: #333;
}

.el-step__icon {
    font-size: 20px;
}
</style>
